<template>
  <view class="page">
	  <view>
		 <u-notice-bar mode="horizontal" :text="text1"></u-notice-bar>
	  </view>
    <!-- 密码 -->
    <view class="card">
      <view class="card-title">密码</view>
      <input v-model="keys.password" placeholder="请输入密码" />
    </view>

    <!-- 联系电话 -->
<!--    <view class="card">-->
<!--      <view class="card-title">联系电话</view>-->
<!--      <input v-model="phoneNumber" placeholder="选填,请填写您的手机号码" />-->
<!--      <view class="card-tip">该信息将会同步给开发者</view>-->
<!--    </view>-->

    <!-- 提交按钮 -->
    <view class="button" @click="submit">提交</view>
  </view>
</template>

<script>
	import {vxSelectByPhoneUpdatepwd} from "../../../api/system/wechat";
	export default {
		data() {
			return {
				//存储钥匙信息
				keys: {
					password: null
				},
				text1: "修改密码之后，需要在门锁上输入9#激活门锁才能够生效密码，或者十二小时后系统自动帮您激活门锁生效密码"
			}
		},
		onload: {
			
		},
		methods: {
			// 提交表单
			submit() {
			  //修改密码
			  vxSelectByPhoneUpdatepwd(this.keys).then(response => {
				const code = response.code;
				const msg = response.msg;
				if(code === 200){
					// this.showToast_Tips('修改密码成功', 'success');
					this.$modal.msgSuccess("修改密码成功");
				}else{
					// this.showToast_Tips('修改密码失败:'+msg, 'error');
					this.$modal.msgSuccess("修改密码失败:"+msg);
				}
			  });
			},
		}
	}
</script>

<style lang="scss">
	.page {
	  background: #f5f5f5;
	  min-height: 100vh;
	  width: 100vw;
	
	  .card {
	    margin-top: 20rpx;
	    background: #fff;
	    padding: 15rpx;
	
	    .card-title {
	      font-size: 16px;
	      margin-bottom: 15rpx;
	    }
	
	    textarea {
	      width: 720rpx;
	      height: 250rpx;
	      font-size: 14px;
	    }
	
	    input {
	      font-size: 14px;
	      border-bottom: 1px solid #dddddd;
	      height: 70rpx;
	    }
	
	    .card-tip {
	      margin-top: 15rpx;
	      font-size: 12px;
	      color: #777;
	    }
	
	    .card-imgs {
	      display: flex;
	      flex-wrap: wrap;
	
	      .card-imgs-item {
	        width: 150rpx;
	        height: 150rpx;
	        background: #444;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        border-radius: 12rpx;
	        margin: 10rpx;
	        position: relative;
	
	        .card-imgs-item-mask {
	          position: absolute;
	          left: 0;
	          top: 0;
	          width: 150rpx;
	          height: 150rpx;
	          z-index: 1;
	          background: rgba(0, 0, 0, .5);
	          color: #fff;
	          font-size: 14px;
	          display: flex;
	          justify-content: center;
	          align-items: center;
	        }
	
	        image {
	          border-radius: 12rpx;
	        }
	
	        .card-imgs-item-del {
	          width: 40rpx;
	          height: 40rpx;
	          position: absolute;
	          right: -15rpx;
	          top: -15rpx;
	          display: flex;
	          justify-content: center;
	          align-items: center;
	          z-index: 2;
	          background: #fff;
	          border-radius: 50%;
	
	          image {
	            width: 40rpx;
	            height: 40rpx;
	          }
	        }
	
	      }
	
	      .card-imgs-upload {
	        width: 150rpx;
	        height: 150rpx;
	        box-sizing: border-box;
	        border: 1px #777 dashed;
	        border-radius: 12rpx;
	        margin: 10rpx;
	        background: #ddd;
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        justify-content: center;
	
	        &:active {
	          background: #ccc;
	        }
	
	        image {
	          width: 60rpx;
	          height: 60rpx;
	        }
	
	        text {
	          font-size: 12px;
	          color: #777;
	        }
	
	      }
	    }
	
	  }
	
	  .button {
	    border-radius: 8rpx;
	    width: 720rpx;
	    margin: 20rpx auto;
	    color: #fff;
	    background: #1365D8;
	    font-size: 16px;
	    text-align: center;
	    height: 90rpx;
	    line-height: 90rpx;
	
	    &:active {
	      background: #0d4697;
	    }
	  }
	
	  .imgFile {
	    width: 150rpx;
	    height: 150rpx;
	    box-sizing: border-box;
	    border-radius: 12rpx;
	    margin: 10rpx;
	    background: #ddd;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	  }
	}
</style>
